
import React, { RefObject, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Toast,
} from 'antd-mobile'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'

function Index() {
    let navgetion = useNavigate()
    const onFinish = async (value) => {
        const res = await request.post('/api/login', value)
        console.log(res);
        const { code, message, data } = res.data
        if (code == 200) {
            localStorage.setItem('token', data.token)
            localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
            navgetion('/props')
        } else {
            Toast.show({
                content: message,
                icon: 'fail'
            })
        }
    }

    const [yzmm, setYzmm] = useState('')
    const [djs, setDjs] = useState(0)
    const yzm = async () => {
        const ress = await request.get('/api/login/code', { params: { tel } })
        console.log(ress);
        let { data } = ress.data
        setYzmm(data)
        setDjs(5)
        let timer = setInterval(() => {
          setDjs((djs)=>{
            if(djs==0){
                clearInterval(timer)
                return 0
            }
            return djs-1
          })
        }, 1000)
    }
    return (
        <div>
            <Form
                onFinish={onFinish}
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Header>火车登陆系统</Form.Header>
                <Form.Item
                    name='tel'
                    label='用户名'
                // rules={[{
                //     required: true,
                //     message: '姓名不能为空',
                //     pattern: /^1[3-9]\d{9}$/


                // }]}
                >
                    <Input onChange={console.log} placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    name='telCode'
                    label='密码'
                // rules={[{
                //     required: true,
                //     message: '密码不能为空',
                //     pattern: /^\w{6,12}$/
                // }]}
                >
                    <Input onChange={console.log} placeholder='请输入密码' value={yzmm} />
                    <Button onClick={() => yzm()} disabled={djs>0}>{djs>0?`${djs}秒后重新`:'获取验证码'} </Button>

                </Form.Item>


            </Form>



        </div>
    )
}

export default Index
